<template>
  <van-swipe :height="height"  class="my-swipe" :loop="false" :autoplay="3000" indicator-color="white">
    <van-swipe-item  v-for="(item, index) in dataList"  :key="index" >
      <img :src="item.carouselUrl" alt="" @click="goTo(item.redirectUrl)">
    </van-swipe-item>
  </van-swipe>
</template>
<script setup>
  import { reactive, ref, isRef, isReactive, onMounted } from 'vue'
  
// 参数	说明	类型	默认值
// autoplay	自动轮播间隔，单位为 ms	number | string	-
// duration	动画时长，单位为 ms	number | string	500
// initial-swipe	初始位置索引值	number | string	0
// width	滑块宽度，单位为 px	number | string	auto 一般为100% 默认不用设置
// height	滑块高度，单位为 px	number | string	auto
// loop	是否开启循环播放	boolean	true
// show-indicators	是否显示指示器	boolean	true
// vertical	是否为纵向滚动	boolean	false
// touchable	是否可以通过手势滑动	boolean	true
// stop-propagation	是否阻止滑动事件冒泡	boolean	true
// lazy-render	是否延迟渲染未展示的轮播	boolean	false
// indicator-color	指示器颜色	string	#1989fa
  defineProps({
    dataList: {
      type: Object,
      required:true,
      // 对象或数组的默认值
      // 必须从一个工厂函数返回。
      // 该函数接收组件所接收到的原始 prop 作为参数。
      default(rawProps) {
        return []
      },
      validator(value, props) {
        // The value must match one of these strings
        return value.length>0
      }
    },
    height:{
      type:[Number,String],
      required:true,
      default:300,
    }
  })

  const goTo = (url)=>{
    console.log('goto...',url)
  }

</script>
<style lang="less" scoped>
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
    background-color: #eee;
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
